<template>
    <new-search-panel :showSearch="false" @search="onSearch" @reset="onReset" v-if="$hasPerm('sysUser:page')">
        <template #button>
            <a-button type="primary" @click="addForm()">
                <template #icon><PlusOutlined /></template>
                新增菜单</a-button
            >
        </template>
    </new-search-panel>
    <a-table
        :scroll="{ x: 1000, y: scrollY }"
        :columns="columns"
        :data-source="menuTrees"
        ref="table"
        :bordered="true"
        :rowKey="(record) => record.id"
        :pagination="false"
        :defaultExpandAllRows="true"
    >
        <template #type="{ text }" v-if="menuType.length > 0">
            {{ filterEnum(menuType, text) }}
        </template>
        <!-- <template #nameSlot="{ text }">
            <ellipsis :value="text" :tooltip="true"></ellipsis>
        </template>
        <template #componentSlot="{ text }">
            <ellipsis :value="text" :tooltip="true"></ellipsis>
        </template>
        <template #routerSlot="{ text }">
            <ellipsis :value="text" :tooltip="true"></ellipsis>
        </template> -->
        <template #menuIcon="{ text }">
            <component :is="$antIcons[`${transIcon(text)}Outlined`]" v-if="text" />
        </template>
        <template #action="{ record }">
            <a @click="editForm(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm placement="topRight" title="确认删除吗？" @confirm="menuDelete(record)">
                <a>删除</a>
            </a-popconfirm>
        </template>
    </a-table>
    <!-- add modal -->
    <operationFrom ref="formRef" @refresh="onSearch" :title="title" />
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, createVNode, onMounted, watch, ref } from 'vue'
import { message, Modal, Table } from 'ant-design-vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { DynamicTable, searchPanel, ellipsis } from '@/components'
import { SysMenuList, getMenuTree, sysMenuAdd, sysMenuEdit, sysMenuDetail, sysMenuDelete } from '@/api/system/menu'
import operationFrom from './components/operationFrom.vue'
import { columns } from './columns'
import { filterEnum } from '@/utils/common'
import { upperFirst } from '@/utils/lodashChunk'
import { useStore } from '@/store'
import { newSearchPanel } from '@/components'

export default defineComponent({
    name: 'SystemMenu',
    components: {
        DynamicTable,
        operationFrom,
        newSearchPanel,
        ellipsis
    },
    setup(props) {
        const tableRef = ref<any>(null)
        const formRef = ref<any>(null)
        const store = useStore()
        const state = reactive({
            tableLoading: false,
            title: '',
            scrollY: 'calc(100vh - 250px)',
            visible: false,
            menuTrees: [],
            /** 查询 */
            queryParam: {
                name: '',
                code: ''
            },
            menuType: [],
            typeId: '',
            rowselection: false
        })
        watch(
            [() => store.state.app.showBread, () => store.state.app.multiTab],
            ([sv], [mv]) => {
                const ht = 214
                const h1 = store.state.app.showBread ? 36 : 0
                const h2 = store.state.app.multiTab ? 40 : 0
                state.scrollY = `calc(100vh - ${ht + h1 + h2}px)`
            },
            {
                immediate: true
            }
        )
        /** 初始化 */
        onMounted(() => {
            store.dispatch('enums/getEnum', 'menu_type').then((res) => {
                state.menuType = res
            })
            getMenuList()
        })

        /**
         * 删除
         * @param record
         */
        function menuDelete(record) {
            sysMenuDelete(record).then(() => {
                message.success('删除成功')
                onSearch()
            })
        }
        /** 递归--修改数据 */
        function formatData(menuTrees) {
            menuTrees.map((items, index) => {
                if (items.children.length > 0) {
                    //内部调用即递归
                    items.children = formatData(items.children)
                } else {
                    menuTrees[index].children = undefined
                }
            })
            return menuTrees
        }
        /**获取菜单数据 */
        function getMenuList() {
            SysMenuList().then((res) => {
                state.menuTrees = formatData(res)
            })
        }
        /**
         * 查询
         */
        function onSearch() {
            // tableRef.value.refreshTableData(state.queryParam)
            getMenuList()
        }
        /**
         * 重置
         */
        function onReset() {
            // state.queryParam = {
            //     name: '',
            //     code: ''
            // }
            onSearch()
        }
        /**
         * 新增菜单
         */
        function addForm() {
            state.title = '新增菜单'
            formRef.value.visible = true
            formRef.value.add = true
        }
        /**
         * 编辑菜单
         */
        function editForm(record) {
            sysMenuDetail({ id: record.id }).then((res) => {
                console.log('ress', record)
                formRef.value.detailData = res
                // formRef.value.menuType = state.menuType
                state.title = '编辑菜单'
                formRef.value.add = false
                formRef.value.visible = true
            })
        }

        // const isDisabled = computed(() => state.rowSelection.selectedRowKeys.length == 0)
        const transIcon = (name) => {
            const newName = [...name]
            for (let i = 0; i < newName.length; i++) {
                if (newName[i] === '-') {
                    newName[i + 1] = upperFirst(newName[i + 1])
                }
            }
            return upperFirst(newName.join('').replace(/-/g, ''))
        }

        return {
            ...toRefs(state),
            columns,
            tableRef,
            formRef,
            transIcon,
            upperFirst,
            SysMenuList,
            onReset,
            onSearch,
            addForm,
            editForm,
            menuDelete,
            getMenuList,
            filterEnum
        }
    }
})
</script>
